const data = require('./data');
const del = require('del');
const { src, dest, parallel, series } = require('gulp');

const loadPlugins = require('gulp-load-plugins');
const pulgins = loadPlugins();

const sass = require('gulp-sass')(require('sass'));
// const pulgins.rename = require('gulp-rename');
// const pulgins.babel = require('gulp-babel');
// const pulgins.swig = require('gulp-swig');
// const pulgins.imagemin = require('gulp-imagemin');
const browserSync = require('browser-sync');
const { watch } = require('browser-sync');
const bs = browserSync.create();

const clean = () => {
    return del(['dist']);
};

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' })
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(pulgins.rename({ suffix: '.min' }))
        .pipe(dest('temp'));
};

const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
        .pipe(
            pulgins.babel({
                presets: ['@babel/env']
            })
        )
        .pipe(dest('temp'));
};

const html = () => {
    return src('src/*.html', { base: 'src' })
        .pipe(pulgins.swig({ data: data, cache: false }))
        .pipe(dest('temp'));
};

const image = () => {
    return src('src/assets/images/**', { base: 'src' }).pipe(pulgins.imagemin()).pipe(dest('dist'));
};
const font = () => {
    return src('src/assets/fonts/**', { base: 'src' }).pipe(pulgins.imagemin()).pipe(dest('dist'));
};

const extra = () => {
    return src('public/**', { base: 'public' }).pipe(dest('dist'));
};

const serve = () => {
    watch('src/assets/styles/*.scss', style);
    watch('src/assets/scripts/*.js', script);
    watch('src/*.html', html);
    // watch('src/assets/images/**', image);
    // watch('src/assets/fonts/**', font);
    // watch('public/**', extra);

    watch(['src/assets/images/**', 'src/assets/fonts/**', 'public/**'], bs.reload());
    bs.init({
        files: 'dist/**',
        notify: false,
        server: {
            //配置项目根路径，因为最终生成的项目在dist文件中
            baseDir: 'dist',
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    });
};

const useref = () => {
    return (
        src('dist/*.html', { base: 'dist' })
            .pipe(pulgins.useref({ searchPath: ['temp', '.'] }))
            // 压缩html、js、css
            .pipe(pulgins.if(/\.js$/, pulgins.uglify()))
            .pipe(pulgins.if(/\.css$/, pulgins.cleanCss()))
            .pipe(
                pulgins.if(
                    /\.html$/,
                    pulgins.htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true })
                )
            )
            .pipe(dest('dist'))
    );
};
const compile = parallel(style, script, html); //只处理src文件

//const build = parallel(compile, extra); //处理src和额外文件

// const build = series(clean, parallel(compile, image, font, extra));
const build = series(clean, parallel(series(compile, useref), image, font, extra));

const develop = series(compile, serve);
module.exports = {
    compile,
    build,
    serve,
    clean,
    develop,
    useref
};
